// 提供当前状态枚举
$processStatus:( READY:0, PREPARIN:1, RUNNING:2, PAUSED:3, SUCCEEDED:4, KILLED:5, FAILED:6, FAILED_FINISHING:7, SKIPPED:8, DISABLED:9, QUEUED:10, FAILED_SUCCEEDED:11, CANCELLED:12);
// 当前状态颜色值，与之前定义枚举一一对应
$processStatusColor:(READY:#ccc, PREPARIN:blue, RUNNING:#fc6907, PAUSED:yellow, SUCCEEDED:green, KILLED:lightblue, FAILED:orange, FAILED_FINISHING:purple, SKIPPED:salmon, DISABLED:beige, QUEUED:brown, FAILED_SUCCEEDED:khaki, CANCELLED:#89be80);
// 是否自定义描边光圈颜色(为"true"时，需要提供自定义的颜色值)
$isDiyStatusColorBg:false;
//当$isDiyStatusColorBg 为true时，将使用这里面的值来作为光圈描边色彩
$processStatusColorBg:(READY:gray, PREPARIN:blue, RUNNING:pink, PAUSED:yellow, SUCCEEDED:green, KILLED:lightblue, FAILED:orange, FAILED_FINISHING:purple, SKIPPED:salmon, DISABLED:beige, QUEUED:brown, FAILED_SUCCEEDED:khaki, CANCELLED:red);
//当前光点是否启用动画（轻闪）默认为true----（注意：当前闪点为ing）
$isAnimate:true;
//闪动周期时间
$animateSpeed:0.8s;
// 定义光点颜色，默认#89be80
$end:#89be80;

/*
* 描边，你将自定义光点描边颜色，需要将$isDiyStatusColorBg 设置为true，否则自定义将不生效，且定义规则按照$processStatusColor 所对应颜色格式一致，若不定义，我们将取$processStatusColor这个对应颜色的高亮度10%来设置
*/

// 定义光点描边颜色
$default:#ccc;
$end_bg:#def0da;
$ing:#fc6907;
$ing_bg:#fbd2b1;
// 定义线条颜色
$line:#ddd;
//字体颜色
$F_c_666:#666;
* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

.dib {
    display: inline-block;
    vertical-align: middle;
}


/*flex*/

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*worlkflow bar*/

.workflowProcess {
    margin: 5rem 0 4rem 0;
    border-top: $line 2px solid;
    position: relative;
    font-size: 1.8em;
    li {
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-top: 20px;
        text-align: center;
        color: $F_c_666;
        cursor: pointer;
        span {
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -15px;
            width: 26px;
            height: 26px;
            background-color: #ffffff;
            border-radius: 50%;
            z-index: 1;
            top: -11px;
            &:after {
                position: absolute;
                content: "";
                background: $default;
                width: 18px;
                height: 18px;
                top: 0;
                left: 4px;
                border-radius: 50%;
                z-index: 0;
            }
        }
        &.workflowProcess-end:after {
            width: 100%;
        }
        &.workflowProcess-end:last-child:after {
            width: 50%;
        }
        &:after {
            content: "";
            height: 0;
            border-top: 2px solid $end;
            width: 0;
            position: absolute;
            top: -2px;
            left: -1;
        }
        &.workflowProcess-ing,
        &.workflowProcess-end {
            span {
                top: -14px;
                &:after {
                    background-color: $ing;
                    border: $ing_bg 4px solid;
                    top: 4px;
                }
            }
        }
        &.workflowProcess-ing {
            &:after {
                width: 100%;
                border-top-color: $ing;
                left: -50%;
            }
            span {
                &:after {
                    @if $isAnimate {
                        // 定义动画
                        animation: skew $animateSpeed alternate infinite;
                        -webkit-animation: skew $animateSpeed alternate infinite;
                        -moz-animation: skew $animateSpeed alternate infinite;
                        -ms-animation: skew $animateSpeed alternate infinite;
                        -o-animation: skew $animateSpeed alternate infinite;
                    }
                }
            }
        }
        &.workflowProcess-end {
            span {
                &:after {
                    background: $end;
                    border-color: $end_bg;
                }
            }
        }
    }
}

@each $process,
$index in $processStatus {
    .workflowProcess {
        li.workflowProcess {
            &_#{$index} {
                span {
                    &:after {
                        $currentColor: map_get($processStatusColor, $process);
                        background-color: $currentColor;
                        @if $isDiyStatusColorBg {
                            border: map_get($processStatusColorBg, $process) 4px solid;
                        }
                        @else {
                            border: lighten($currentColor, 10%) 4px solid;
                        }
                    }
                }
            }
        }
    }
}

// 定义动画方式
@keyframes skew {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(0.9, 0.9);
    }
}

@-webkit-keyframes skew {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(0.9, 0.9);
    }
}

@-moz-keyframes skew {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(0.9, 0.9);
    }
}

@-ms-keyframes skew {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(0.9, 0.9);
    }
}

@-o-keyframes skew {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(0.9, 0.9);
    }
}

.workflowProcess li.workflowProcess-end:last-child:after {
    width: 50%;
}

ins {
    text-decoration: none;
}

// 媒介查询，定义临界点样式
@media screen and (max-width:768px) {
    .workflowProcess .flex {
        flex-direction: column;
        width: 7em;
        height: 100vw;
        top: 0;
    }
    .workflowProcess {
        height: 100vw;
        width: 12em;
        position: relative;
        border-top: none;
        border-left: 2px solid $line;
        margin-left: 2em;
        ul {
            position: relative;
            left: 0;
        }
        li {
            padding: 0;
            letter-spacing: 2px;
            &.workflowProcess-end {
                &:after {
                    width: 0;
                    height: 100%;
                    border-left: 2px solid $end;
                    border-top: none;
                    left: -2px;
                }
                span {
                    top: 50%;
                }
            }
            &.workflowProcess-ing {
                &:after {
                    left: -2px;
                    border-top: none;
                    border-left: 2px solid $ing;
                    height: 100%;
                    top: -50%;
                }
                span {
                    +ins {
                        margin-top: 0;
                        bottom: 48%;
                    }
                }
            }
            span {
                &:after {
                    top: 4px;
                    left: 3px;
                }
            }
            ins {
                text-decoration: none;
                position: absolute;
                width: 5em;
                text-align: left;
                left: 1em;
                top: 46%;
            }
            &.workflowProcess-ing span,
            span {
                bottom: 0;
                margin-left: -13px;
                top: 50%;
                margin-top: -8px;
                left: 0;
            }
        }
    }
}


/*workflowProcess style end*/